import React from 'react'
import { connect } from 'react-redux'

const mapStateToProps = (state) => {
  return {
    modalContent: state.dynamics.groupModalContent,
    showModal: state.dynamics.showGroupModal
  }
}

const mapDispatchToProps = (dispatch, ownProps) => {
  return {
    closeModal: () => dispatch(global.allActions.groupActions.closeModal()),
    openModal: msg => dispatch(global.allActions.groupActions.openModal(msg))
  }
}

class ModalDialog extends React.Component<any, any> {
  public constructor(props) {
    super(props)
  }
  
  public componentDidMount() {

  }

  handleClose() {
    this.props.closeModal()
  }

  public render() {
    return this.props.showModal ? <div className="dialog-block has-mask full" >
      <div className="group-content content">
        <div className="full-width title-wrapper group">
          <img className="title small" src="img/groupNew/tips-title.png" alt=""/>
          <img onClick={this.props.closeModal.bind(this)} className="close" src="img/mall/dialog/close.png" alt="" />
        </div>
        <div className="modal-wrapper">
          <div className="vh-center group-conent-full">
            <span>{this.props.modalContent}</span>
          </div>
          <div className="bottom-btn">
            <img className="confirm" onClick={this.props.closeModal.bind(this)} src="img/mall/dialog/confirm.png" alt=""></img>
            {/* <img className="confirm" onClick={close} src="img/mall/dialog/cancel.png" alt=""></img> */}
            {/* <img className="confirm" onClick={this.query.bind(this)} src="img/mall/dialog/confirm.png" alt=""></img> */}
            {/* <img className="full-width" src="img/mall/dialog/confirm.png" alt=""></img> */}
          </div>
        </div>
      </div>
    </div> : null
  }

}
export default connect(mapStateToProps, mapDispatchToProps)(ModalDialog)